import Link from "next/link";
import { ArrowRight, Bot, Code, Globe, Infinity } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { HeroAnimation } from "@/components/hero-animation";
import AIChatDemo from "@/components/ai-chat-demo";
import { ClientsCarousel } from "@/components/clients-carousel";

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 bg-gradient-to-r from-slate-950 to-indigo-950">
        <div className="container px-4 md:px-6 relative">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="absolute inset-0 opacity-30">
              <HeroAnimation />
            </div>
            <div className="space-y-2 relative z-10">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none text-white">
                Redefining AI Agents For <span className="text-gradient bg-clip-text text-transparent bg-gradient-to-r from-[#50E3C2] to-[#00F5A0]">Enterprise Solutions</span>
              </h1>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                bgactor transforms how businesses operate with autonomous AI agents that learn, adapt, and deliver results.
              </p>
            </div>
            <div className="space-x-4 relative z-10">
              <Button asChild className="bg-gradient-to-r from-[#4A3AFF] to-[#2A265F] text-white">
                <Link href="/demo">
                  Try Live Demo <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
              <Button variant="outline" className="border-white/20 text-[#50E3C2] hover:bg-white/10">
                <Link href="/about">Learn More</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="w-full py-12 md:py-24 bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-indigo-900/20 px-3 py-1 text-sm text-indigo-400">
                Features
              </div>
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-white">
                Cutting-Edge AI Capabilities
              </h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-xl">
                Our AI agents combine advanced machine learning with intuitive design for powerful enterprise solutions.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3 lg:gap-12 mt-8">
            <Card className="bg-slate-900/50 border-slate-800 backdrop-blur-sm text-white">
              <CardHeader>
                <Bot className="h-8 w-8 text-[#50E3C2] mb-2" />
                <CardTitle>Autonomous Agents</CardTitle>
                <CardDescription className="text-zinc-400">
                  Self-learning AI agents that adapt to your business needs
                </CardDescription>
              </CardHeader>
              <CardContent>
                Deploy agents that handle complex tasks with minimal supervision, learning from each interaction.
              </CardContent>
            </Card>
            <Card className="bg-slate-900/50 border-slate-800 backdrop-blur-sm text-white">
              <CardHeader>
                <Globe className="h-8 w-8 text-[#50E3C2] mb-2" />
                <CardTitle>Enterprise Integration</CardTitle>
                <CardDescription className="text-zinc-400">
                  Seamless integration with your existing workflow
                </CardDescription>
              </CardHeader>
              <CardContent>
                Our agents connect with your tools and systems for a unified operational experience.
              </CardContent>
            </Card>
            <Card className="bg-slate-900/50 border-slate-800 backdrop-blur-sm text-white">
              <CardHeader>
                <Code className="h-8 w-8 text-[#50E3C2] mb-2" />
                <CardTitle>Advanced Analytics</CardTitle>
                <CardDescription className="text-zinc-400">
                  Real-time insights from your agent operations
                </CardDescription>
              </CardHeader>
              <CardContent>
                Detailed analytics and reporting to optimize your AI-driven processes.
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Clients Section */}
      <section className="w-full py-12 md:py-16 bg-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center mb-8">
            <h3 className="text-2xl font-bold text-white">Trusted by Industry Leaders</h3>
          </div>
          <ClientsCarousel />
        </div>
      </section>

      {/* Live Demo Section */}
      <section className="w-full py-12 md:py-24 bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center mb-8">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl text-white">
                Experience Our AI Assistant
              </h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-xl">
                Try our AI assistant right now to see the power of bgactor's technology
              </p>
            </div>
          </div>
          <div className="mx-auto max-w-4xl">
            <AIChatDemo />
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-indigo-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl text-white">
                Ready to Transform Your Business?
              </h2>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                Start your journey with bgactor's AI agents today.
              </p>
            </div>
            <div className="space-x-4">
              <Button asChild size="lg" className="bg-white text-indigo-950 hover:bg-zinc-200">
                <Link href="/contact">
                  Contact Sales
                </Link>
              </Button>
              <Button asChild variant="outline" size="lg" className="border-[#50E3C2] text-[#50E3C2] hover:bg-[#50E3C2]/10">
                <Link href="/pricing">
                  View Pricing
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
} 